<template>
    <div class="box">
      <div class="title">
        <h3>{{info.title}}</h3>
        <span>{{t2s(info.updated_at)}}</span>
      </div>
      <div class="con">
        <p v-html='info.content'></p>
      </div>
      <div class="sc">
        <button @click="addCollection">立即收藏</button>
      </div>
    </div>
</template>

<script>
import * as info from '../api/info'
import * as t from '../utils/time'
export default {
  name: 'source-detail',
  data () {
    return {
      id: 0,
      info: {}
    }
  },
  methods: {
    getArticleDetail (id) {
      info.getArticles(id)
        .then(res => {
          console.log(res.data)
          this.info = res.data
        })
    },
    t2s (time) {
      return t.t2s(time)
    }, 
    addCollection () {
      console.log(JSON.stringify(this.info))
      info.favorites(JSON.stringify(this.info))
        .then(res => {
          if (res.code == 200) {
            alert('收藏成功')
          }
        })
    }
  },
  mounted () {
    this.id = this.$route.query.id
    this.getArticleDetail(this.id)
  }
}
</script>

<style scoped>
.box{
  padding-bottom: .8rem;
}
.title{
  padding: .4rem .3rem;
  border-bottom: 1px solid #e6e6e6;
}
.title h3{
  height: 1rem;
  line-height: 1rem;
  font-size: .42rem;
  color: #000;
}
.title span{
  font-size: .36rem;
  color: #888;
}
.con{
  padding: .3rem;
}
.con p{
  font-size: .38rem;
  color: #333;
  line-height: .56rem;
  text-indent: .3rem;
  padding-bottom: .2rem;
}
.pic img{
  display: block;
  margin: .2rem auto;
  max-width: 100%;
}
.video{
  border: 1px solid #e6e6e6;
  margin-bottom: .3rem;
}
.audio{
  margin: .2rem 0;
}
.audio audio{
  display: block;
  width: 100%;
}
.sc button{
  display: block;
  width: 4rem;
  height: 1rem;
  line-height: 1rem;
  background: #007aff;
  color: #fff;
  margin: .3rem auto;
  border: none;
}
</style>
